<template>
  <a-dropdown :trigger="['click']" placement="bottom" arrow>
    <a class="ant-dropdown-link" @click.prevent>
      <!-- {{ authUserStore.userInfo.username }} -->
      <a-avatar size="large" :style="{ backgroundColor: '#108ee9', verticalAlign: 'middle' }" :gap="1">
        {{ authUserStore.userInfo.username.slice(0, 3) }}
      </a-avatar>
      <!-- <DownOutlined /> -->
    </a>
    <template #overlay>
      <a-menu @click="onClick">
        <a-menu-item key="logout">
          <a-space size="small">
            <LoginOutlined />
            <span>退出</span>
          </a-space></a-menu-item
        >
        <a-menu-divider />
        <a-menu-item key="setting">
          <a-space size="small">
            <SettingOutlined />
            <span>設置</span>
          </a-space></a-menu-item
        >
        <!-- <a-menu-divider /> -->
        <!-- <a-menu-item key="clearCache">清除缓存</a-menu-item> -->
      </a-menu>
    </template>
  </a-dropdown>
</template>
<script setup lang="ts">
import type { MenuProps } from 'ant-design-vue'
import { LoginOutlined, SettingOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import { useAuthUserStore } from '@/store/authUserStore'
import { authApi } from '@/api'

const router = useRouter()
const authUserStore = useAuthUserStore()

// 定义操作逻辑
const actions: { [key: string]: () => void | Promise<void> } = {
  logout: async () => {
    try {
      await authApi.logoutRequest()
      authUserStore.clearData()
      router.push({ path: '/login' })
    } catch (error) {
      console.error('退出失敗:', error)
    }
  },
  setting: async () => {
    router.push({ name: 'Setting' })
  },
  clearCache: async () => {
    // 清除缓存逻辑...
    try {
      // 调用清除缓存的方法
      // await systemApi.clearCache()
      console.log('缓存已清除')
    } catch (error) {
      console.error('清除缓存失败:', error)
    }
  },
  // 添加其他操作...
}

// 处理菜单点击事件
const onClick: MenuProps['onClick'] = ({ key }) => {
  if (actions[key]) {
    actions[key]()
  } else {
    console.error(`Invalid action key: ${key}`)
    // 可以在这里添加更多的错误处理逻辑，例如提示用户操作无效
  }
}
</script>

<!-- 添加组件注释 -->
<!-- UserStatus.vue -->
<!-- 该组件用于显示用户状态并提供一些操作选项，如注销和重置密码 -->
